<template>
  <div class="app-container home">
    <!-- 昨日销售前三名 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="top3-card">
          <div slot="header" class="clearfix">
            <span>🏆 昨日销售前三名</span>
          </div>
          <div class="ranking-container">
            <div class="podium">
              <!-- 第二名 -->
              <div class="person second">
                <img :src="top3Sales[1].avatar" class="avatar" alt="头像">
                <div class="rank-badge">2</div>
                <div class="name">{{ top3Sales[1].name }}</div>
                <div class="base"></div>
              </div>
              
              <!-- 第一名 -->
              <div class="person first">
                <img :src="top3Sales[0].avatar" class="avatar" alt="头像">
                <div class="rank-badge">1</div>
                <div class="name">{{ top3Sales[0].name }}</div>
                <div class="base"></div>
              </div>
              
              <!-- 第三名 -->
              <div class="person third">
                <img :src="top3Sales[2].avatar" class="avatar" alt="头像">
                <div class="rank-badge">3</div>
                <div class="name">{{ top3Sales[2].name }}</div>
                <div class="base"></div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // Mock数据 - 昨日销售前三名
      top3Sales: [
        { id: 1, name: "张伟", avatar: "https://i.pravatar.cc/100?img=11" },
        { id: 2, name: "李娜", avatar: "https://i.pravatar.cc/100?img=22" },
        { id: 3, name: "王强", avatar: "https://i.pravatar.cc/100?img=33" }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  .top3-card {
    background-color: #f5f7fa;
    color: #333;
    
    ::v-deep .el-card__header {
      border-bottom: none;
      
      span {
        color: #1890ff;
        font-size: 20px;
      }
    }
    
    .ranking-container {
      padding: 30px 0;
      
      .podium {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        gap: 40px;
        
        .person {
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
          
          .avatar {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            border: 3px solid #a8c2f5;
            object-fit: cover;
          }
          
          .name {
            margin-top: 10px;
            font-size: 18px;
            font-weight: bold;
            color: #333;
          }
          
          /* 奖台高度与颜色区分 */
          .base {
            width: 120px;
            border-radius: 10px 10px 0 0;
            margin-top: 16px;
          }
          
          &.first .base {
            height: 100px;
            background: linear-gradient(180deg, #FFD700, #FFC107);
          }
          
          &.second .base {
            height: 80px;
            background: linear-gradient(180deg, #C0C0C0, #A9A9A9);
          }
          
          &.third .base {
            height: 70px;
            background: linear-gradient(180deg, #CD7F32, #B87333);
          }
          
          .rank-badge {
            position: absolute;
            top: -15px;
            right: -10px;
            background-color: #FFD700;
            color: #fff;
            font-weight: bold;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            border: 2px solid #333;
          }
          
          &.second .rank-badge {
            background-color: #C0C0C0;
          }
          
          &.third .rank-badge {
            background-color: #CD7F32;
          }
        }
      }
    }
  }
}
</style>


